<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item required label="单据类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="auart">
              <a-select v-model:value="model.auart" placeholder="请选择单据类型">
                <a-select-option value="0">标准订单</a-select-option>
                <a-select-option value="1">奖励订单</a-select-option>
                <a-select-option value="2">折扣订单(整单)</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input v-model="model.supplier" placeholder="请输入供应商"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="采购日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purdat">
              <a-date-picker v-model:value="model.purdat" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="交货日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ketdat">
              <a-date-picker v-model:value="model.ketdat" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="产品组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spart">
              <a-input v-model="model.spart" placeholder="请输入产品组"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="销售组织" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vkorg">
              <a-input v-model="model.vkorg" placeholder="请输入销售组织"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="付款方" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ktonrpy">
              <a-input v-model="model.ktonrpy" placeholder="请输入付款方"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="送达方" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ktonrsh">
              <a-input v-model="model.ktonrsh" placeholder="请输入送达方"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ihrez">
              <a-input v-model="model.ihrez" placeholder="请输入单据编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="单据状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
              <a-radio-group v-model:value="model.state">
                <a-radio :value="1">已审批</a-radio>
                <a-radio :value="0">未审批</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item required label="收货地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shipadd">
              <a-input v-model="model.shipadd" placeholder="请输入收货地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
              <a-input v-model="model.remarks" placeholder="请输入备注"></a-input>
            </a-form-model-item>
          </a-col>
          <a-button v-if="formType == 1" type="primary" @click="addUser">添加明细表</a-button>
          <a-col :span="24" v-if="formShow && !disabled">
            <a-space
              v-for="(item, index) in model.detail"
              :key="index"
              style="display: flex; margin-bottom: 8px; margin-top: 8px"
            >
            <a-input v-model:value="item.matnr" placeholder="请输入物料号" />
              <a-input v-model:value="item.matnrName" placeholder="请输入物料名称" />
              <a-input v-model:value="item.batchNo" placeholder="请输入批号" />
              <a-input v-model:value="item.serialNo" placeholder="请输入批序号" />
              <a-input type="number" v-model:value="item.kwmeng" placeholder="请输入采购数量" />
              <a-input v-model:value="item.remark" placeholder="请输入备注" />
              <a-button v-if="!disabled" size="small" type="primary" danger @click="removeUser(item)">删除</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <a-input-search
      v-if="disabled"
      v-model="searchKey"
      placeholder="请输入批号搜索"
      enter-button
      style="margin-bottom: 20px"
      allowClear
    />

    <a-table
      v-if="disabled"
      :columns="columns"
      rowKey="id"
      :data-source="filterData"
      :scroll="{ y: 300 }"
      :pagination="false"
    >
    </a-table>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { queryPurchaseDetail } from '@/api/warehouse'
export default {
  name: 'WmsCheckForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  components: {},
  data() {
    return {
      model: {
        detail: [],
        isContinue: 0,
        tkwmeng: 0
      },
      title: '',
      formShow: false,
      modelDefault: {},
      formType: null,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/wms/purOrder/add',
        edit: '/wms/purOrder/edit',
      },
      searchKey: null,
      dataSource: [],
      columns: [
      {
          title: '物料号',
          dataIndex: 'matnr',
          key: 'matnr',
          width: 120,
          customRender: function (t, r) {
            return r.matnr ? r.matnr : '-'
          },
        },
        {
          title: '物料名称',
          dataIndex: 'matName',
          key: 'matName',
          width: 120,
        },
        {
          title: '批号',
          dataIndex: 'batchNo',
          key: 'batchNo',
          customRender: function (t, r) {
            return r.batchNo ? r.batchNo : '-'
          },
        },
        {
          title: '批序号',
          dataIndex: 'serialno',
          key: 'serialno',
          customRender: function (t, r) {
            return r.serialno ? r.serialno : '-'
          },
        },
        {
          title: '采购数量',
          dataIndex: 'kwmeng',
          key: 'kwmeng',
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'desNote',
          key: 'desNote',
          align: 'center',
        },
      ],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    filterData() {
      const { dataSource, searchKey } = this
      if (searchKey) {
        return dataSource.filter((f) => f.batchNo.indexOf(searchKey) > -1)
      } else {
        return dataSource
      }
    },
    total() {
      let num = 0
      const { dataSource } = this
      dataSource.forEach((e) => {
        num += e.sums
      })
      return num
    },
  },
  created() {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add(formType, title) {
      if (formType == 1) {
        this.formType = formType
        this.title = title
      }
    },
    async edit(record) {
      try {
        if (record.id) {
          this.formType = 2
          const params = { id: record.id }
          const r = await queryPurchaseDetail(params)

          this.dataSource = r.result.detail
          // this.visible = true

          let that = this
          this.$nextTick(() => {
            that.model = r.result
            that.formShow = true
          })
        }
      } catch (_) {
        console.log(_)
      }
    },
    submitForm() {
      const that = this
      console.log(this.model);
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          console.log(this.model);
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally((err) => {
              that.confirmLoading = false
            })
        }
      })
    },

    removeUser(item) {
      let arr = this.model.detail
      let index = arr.indexOf(item)
      if (index !== -1) {
        arr.splice(index, 1)
        this.model.detail = arr
      }
    },
    addUser() {
      this.formShow = true
      let arr = this.model.detail
      arr.push({
        matnr: '',
        matName:'',
        batchNo: '',
        serialNo: '',
        kwmeng:'',
        desNote:'',
      })
      this.model.detail = arr
    },
  },
}
</script>

